<template>
  <div class="page-select-service">
    <div class="title">
      已选商品
      <div class="btn-add" @click="toAdd">+添加</div>
    </div>
    <ul class="item-list">
      <li class="item" v-for="(data,index) in dataList" :key="index">
        <div class="goods-name">{{data.goodsName}}</div>
        <div class="number">数量:x{{data.giftNum}}</div>
        <img @click="remove(index)" class="btn-delete" src="/static/images/common/remove.png">
      </li>
    </ul>
    <div class="btn-submit" @click="toSelect">确定提交</div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        goodsList: [],
        dataList: []
      };
    },
    components: {},
    methods: {
      remove(index) {
        this.dataList.splice(index, 1);
        App.giftList.splice(index, 1);
      },
      toAdd() {
        wx.navigateTo({
          url: "/pages/select-goods/main"
        });
      },
      getGoodsIntegral(data){
        let integral = 0;
        this.goodsList.some(goods => {
          if (goods.goodsId === data.goodsId) {
            integral = goods.integral;
            return true;
          }
          return false;
        });
        return integral;
      },
      getGoodsName(data) {
        let goodsName = "";
        this.goodsList.some(goods => {
          if (goods.goodsId === data.giftId) {
            goodsName = goods.goodsName;
            return true;
          }
          return false;
        });
        return goodsName;
      },
      toSelect() {
        wx.navigateBack();
      }
    },
    async onShow() {
      wx.showLoading();
      const result = await wx.request({
        url: "/bg/goods/listPage",
        data: {
          page: 1,
          pageSize: 100,
          status: 1,
          type: 1
        }
      });
      wx.hideLoading();
      if (result.code === 200) {
        const goodsList = [];
        result.data.rows.forEach(data => {
          goodsList.push(_.pick(data, [ "goodsId", "goodsName", "integral" ]));
        });
        this.goodsList = goodsList;
        const list = [];
        App.giftList.forEach(data => {
          data.goodsName = this.getGoodsName(data);
          data.integral = this.getGoodsIntegral(data);
          list.push({
            goodsName: data.goodsName,
            integral: data.integral,
            goodsId: data.giftId,
            giftNum: data.giftNum
          });
        });
        this.dataList = list;
      } else {
        wx.showToast(result.message);
      }
    }
  };
</script>

<style lang="scss">
  @import "../../styles/base";

  .page-select-service {
    .title {
      position: relative;
      padding: pxToRem(40) pxToRem(30) pxToRem(10);
      font-size: pxToRem(32);
      color: #707070;
      .btn-add {
        @include middle-center-y();
        right: pxToRem(40);
        width: pxToRem(140);
        height: pxToRem(50);
        line-height: pxToRem(50);
        font-size: pxToRem(28);
        background-color: $main-color;
        color: #fff;
        text-align: center;
      }
    }
    .item-list {
      padding: pxToRem(30) pxToRem(40);
      .item {
        display: flex;
        align-items: center;
        height: pxToRem(100);
        line-height: pxToRem(100);
        border-bottom: pxToRem(1) solid rgba(68, 189, 245, 0.3);
        .goods-name {
          width: pxToRem(388);
          font-size: pxToRem(32);
          @include ellipsis();
        }
        .number {
          width: pxToRem(240);
          text-align: left;
          font-size: pxToRem(28);
          color: #707070;
        }
        .btn-delete {
          width: pxToRem(28);
          height: pxToRem(30);
        }
      }
    }
    .btn-submit {
      margin: pxToRem(310) auto 0;
      width: pxToRem(444);
      height: pxToRem(88);
      line-height: pxToRem(88);
      text-align: center;
      font-size: pxToRem(40);
      color: #fff;
      background: linear-gradient(90deg, rgba(117, 228, 252, 1) 0%, rgba(68, 189, 245, 1) 100%);
      border-radius: pxToRem(8);
    }
  }
</style>
